<!-- 后台主页 -->
<template>
  <!-- 知识点：
   Container 布局容器
   用于布局的容器组件，方便快速搭建页面的基本结构：

   <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。

   <el-header>：顶栏容器。    <el-header> 实际等价于   <div class="el-header">

   <el-aside>：侧边栏容器。

   <el-main>：主要区域容器。

   <el-footer>：底栏容器。

   https://element-plus.gitee.io/#/zh-CN/component/container
   -->
  <!-- 外部容器 -->
  <el-container>
    <!-- 1.头部区域 -->
    <el-header style="padding-left: 0px">
      <el-row style="height: 100%" type="flex" align="middle">
        <el-col :span="12">
          <img src="../assets/images/logo2.png" />
          <span class="title">XXX后台管理面板</span>
        </el-col>

        <el-col :span="12" style="text-align: right">
          <img :src="$store.state.baseURL + user.avatar" style="border-radius: 25px;width:48px;height:48px" />
          <span  class="name">欢迎：{{user.name}}</span>
          <span class="logout" @click="logout">退出</span>
        </el-col>
      </el-row>
    </el-header>

    <!-- 2.页面主体区域 -->
    <el-container>
      <!-- 2.1侧边栏 菜单
      vue里的数据绑定
      -->
      <el-aside width="200px">
        <!-- el-menu 菜单主容器
        default-active：当前激活菜单的 index
        router：是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转
        unique-opened：是否只保持一个子菜单的展开
        index：
     
     菜单结构
     el-menu:主
        el-submenu：一级
           el-menu-item：二级
         -->
        <el-menu
          default-active="/welcome"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
          router
          unique-opened
          background-color="#333744"
          text-color="#fff"
          active-text-color="#409EFF"
        >
          <el-submenu index="1">
            <!-- 一级菜单 -->
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">功能菜单</span>
            </template>
            <el-menu-item index="/welcome">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>欢迎页</span>
              </template>
            </el-menu-item>

            <!-- 二级菜单 -->
            <el-menu-item index="/homework">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>作业管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/category">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>分类管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/addblog">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>添加博客</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/blog">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>博客管理</span>
              </template>
            </el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">系统菜单</span>
            </template>

            <el-menu-item index="/user">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>用户管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/role">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>角色管理</span>
              </template>
            </el-menu-item>

            <el-menu-item index="/dict">
              <!-- 二级菜单模板 -->
              <template slot="title">
                <!-- 图标 -->
                <i class="el-icon-menu"></i>
                <!-- 文本 -->
                <span>字典管理</span>
              </template>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

      <!-- 2.2主体结构 -->
      <el-main>
        <!-- 路由占位符,子菜单内容注入到这里展示， 子菜单注册到Home的子路由-->
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
export default {
  // 变量
  data() {
    return {
      // 左侧菜单数据
      menuList: [],

      user:{}
    };
  },

  // 生命周期函数
  created() {
    this.getCurrentUser();

  },

  // 自定义函数
  methods: {
  
  //获取当前用户
  async  getCurrentUser(){
       const { data: res } = await this.$http.post("/user/getCurrentUser");

        if (res.code !== 200)
          return this.$message.error("获取失败,原因：" + res.msg);
        
        console.log(res.data)
        this.user=res.data
        this.$store.commit("setUser", res.data);

        console.log("setuser",this.$store.state.user)
    },

    getMenusList() {},

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    // 退出
    logout() {
      window.sessionStorage.clear(); // 清空
      this.$router.push("/login");   //跳转
    },
  },
};
</script>

<!-- less / scoped-->
<style  scoped>
.el-container {
  height: 100%;
}

.el-header {
  background-color: #373d41;
  color: #fff;
}

.el-header .title {
  font-size: 20px;
  font-weight: bold;
  padding-left: 15px;
}
.el-header img {
  font-size: 0;
  vertical-align: middle;
}
.el-header .logout,.el-header .name {
  vertical-align: middle;
  font-size: 15px;
  padding-left: 15px;
}

.el-aside {
  background-color: #333744;
}

.el-aside .el-menu {
  border-right: none;
}
.el-main {
  background-color: #eaedf1;
}
</style>
